<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="标题">
              <a-input placeholder="请输入标题" v-model="queryParam.title"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="文章状态">
              <a-select v-model="queryParam.status" placeholder="请选择文章状态">
                <a-select-option value="0">草稿</a-select-option>
                <a-select-option value="1">发布</a-select-option>
                <a-select-option value="2">回收站</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="文章分类目录">
              <a-tree-select
                showSearch
                placeholder="选择分类目录"
                allowClear
                :treeData="treeData"
                treeDefaultExpandAll
                treeNodeFilterProp="title"
                v-model="queryParam.categoryId"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-button @click="() => {this.queryPage()}" type="primary">查询</a-button>
            <a-button @click="() => queryParam = {}" style="margin-left: 8px">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button icon="plus" type="primary" @click="addPost">写文章</a-button>
    </div>
    <v-table
      bordered
      ref="table"
      :data="loadData"
      :columns="columns"
    >
      <span slot="status" slot-scope="{row,text}">
        {{getstatus(text)}}
      </span>
      <span slot="editTime"  slot-scope="{row,text}">
        {{getEditTime(text)}}
      </span>
      <span slot="action" slot-scope="text,record">
        <span>
          <a href="javascript:;" @click="edit(record)">编辑</a>
          <a-divider type="vertical" />
        </span>
        <span>
          <a href="javascript:;" @click="recycle(record)">回收站</a>
          <a-divider type="vertical" />
        </span>
        <span>
          <a href="javascript:;"@click="site(record)">设置</a>
        </span>
      </span>
    </v-table>
    <post-details-add
      ref="postDetailsAdd"
      @parentSource="getParentSource"
    />
  </a-card>
</template>

<script>
import moment from 'moment'
import { TableMixin } from '@/mixins/TableMixin'
import { fetchList, setRecycle } from '@/api/cms/cmsPost'
import { treeList } from '@/api/cms/cmsCategory'
import postDetailsAdd from './postDetailsAdd'
import { treeDataTranslate } from '@/utils/util'
const statusList = [
  {
    label: '草稿',
    value: '0'
  },
  {
    label: '发布',
    value: '1'
  },
  {
    label: '回收站',
    value: '2'
  }
]
export default {
  name: 'CloudPlatformView',
  mixins: [TableMixin],
  components: {
    postDetailsAdd
  },
  data () {
    return {
      queryParam: {
        title: '',
        status: undefined,
        categoryId: undefined,
        parentSource: {},
        dataSource: {}
      },
      typeList: [],
      treeData: [],
      loadData: parameter => {
        return fetchList(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          this.dataSource = res.data
          return res.data
        })
      },
      columns: [
        {
          title: '标题',
          field: 'title',
          width: '12%'
        },
        {
          title: '状态',
          field: 'status',
          width: '5%'
        },
        {
          title: '分类',
          width: '8%',
          field: 'categoryName'
        },
        {
          title: '概要',
          field: 'summary'
        },
        {
          title: '描述',
          width: '20%',
          field: 'metaDescription'

        },
        {
          title: '访问',
          width: '5%',
          field: 'visits'
        },
        {
          title: '发布时间',
          width: '12%',
          field: 'editTime',
          slot: true
        },
        {
          title: '操作',
          width: '200px',
          field: 'action',
          slot: true
        }
      ],
      statusTypeList: [
        {
          label: '草稿',
          value: '0'
        },
        {
          label: '发布',
          value: '1'
        },
        {
          label: '回收站',
          value: '2'
        }
      ]
    }
  },
  methods: {
    getstatus (text) {
      const index = this.statusTypeList.find(item =>{
        return item.value == text
      })
      return index.value
    },
    getEditTime (text) {
      if(text==''||text==null){
        return  ''
      } else{
        return moment(text).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    addPost () {
      this.$router.push({ name: 'postAdd', query: { id: null, type: 'add' } })
    },
    edit (record) {
      this.$router.push({ name: 'postAdd', query: { id: record.id, type: 'edit' } })
    },
    // 回收站
    recycle (record) {
      setRecycle(record).then(res => {
        this.$message.success('保存到回收站！')
        this.queryPage()
      })
    },
    // 设置
    site (record) {
      this.parentSource = record
      this.$refs.postDetailsAdd.edit(this.parentSource, 'edit')
    },
    // 将父组件的数据传递给子组件
    getParentSource () {
      this.$refs.postDetailsAdd.getParentSource(this.parentSource)
    }
  },
  mounted () {
    treeList().then(res => {
      this.treeData = treeDataTranslate(res.data, 'categoryId', 'name')
    })
  }
}
</script>

<style scoped>

</style>
